<template>
    <div id="app">
        <div v-if="attachedMain">
            <header id="header">
                <Header></Header>
            </header>
            <div id="content">
                <router-view />
            </div>
            <footer>
                <Footer></Footer>
            </footer>
        </div>
        <div v-else>
            <router-view />
        </div>
    </div>
</template>

<script>
import Header from "@/components/Header"
import Footer from "@/components/Footer"
export default {
    name: "App",
    components: {
        Header,
        Footer
    },
    computed: {
        attachedMain() {
            const NotList = ["/login", "/reg", "/rorget_pwd"]
            return Boolean(!~NotList.indexOf(this.$route.path))
        }
    }
}
</script>
<style lang="scss" scoped>
    #app {
        #content {
            box-sizing: border-box;
            min-height: calc(100vh - 70px);
            width: 64vw;
            margin-left: 18vw;
            margin-right: 18vw;
        }
    }
</style>
